<template>
	<div class="list_page">
		<div class="export_btn">
			<el-button icon="el-icon-download" :loading="export_status" @click="export_cli">导出</el-button>
		</div>
		<div class="result_box">
			<div class="finish">
				<el-image lazy :src="f_img"></el-image>
				<div class="f_text">
					<div class="num">126</div>
					<div class="text">已评价</div>
				</div>
			</div>
			<div class="unfinish">
				<el-image lazy :src="unf_img"></el-image>
				<div class="unf_text">
					<div class="num">126</div>
					<div class="text">待评价</div>
				</div>
			</div>
		</div>
		<div class="table_box">
			<div class="search_box">
				<div class="left_item">
					<div class="search_item">
						<div class="search_item_top">单位名称</div>
						<div class="search_item_bottom">
							<el-input v-model="formData.name"></el-input>
						</div>
					</div>
					<div class="search_item">
						<div class="search_item_top">评价表名</div>
						<div class="box_search_item_bottom">
							<el-input v-model="formData.tableName"></el-input>
						</div>
					</div>
					<div class="search_item">
						<div class="search_item_top">评价状态</div>
						<div class="box_search_item_bottom">
							<el-select class="status_sel" v-model="formData.status">
								<el-option v-for="(item, index) in ratingList" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</div>
					</div>
				</div>
				<div class="right_item">
					<el-button class="search_btn" :loading="search_status" type="primary" icon="el-icon-search"
						@click="query">查询</el-button>
					<el-button icon="el-icon-refresh">重置</el-button>
				</div>
			</div>
			<el-table class="table_item" :data="tableData" style="width: 100%" height="450px"
				header-row-class-name="header_item" stripe v-loading="search_status">
				<el-table-column align="center" type="index" label="序号" width="60">
				</el-table-column>
				<el-table-column align="left" prop="a" label="子集团">
				</el-table-column>
				<el-table-column align="center" prop="b" label="单位名称(代号)">
				</el-table-column>
				<el-table-column align="center" prop="c" label="涉H情况">
				</el-table-column>
				<el-table-column align="center" prop="d" label="分厂/车间名称及编号">
				</el-table-column>
				<el-table-column align="center" prop="e" label="主要工艺类型">
				</el-table-column>
				<el-table-column align="center" prop="f" label="工作方式">
				</el-table-column>
				<el-table-column align="center" prop="g">
					<template #header>
						<div>开展情况</div>
						<div>(已完成/总计)</div>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="g">
					<template #header>
						<div>结果统计</div>
						<div>(合格/不合格)</div>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="100">
					<template slot-scope="scope">
						<el-button class="edit_btn" size="mini" @click="detail_cli(scope.row)">去检查</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagi_box">
				<el-pagination background :page-sizes="[10, 30, 50]" :current-page="page.pageIndex"
					:page-size="page.pageSize" layout="total, prev, pager, next, sizes, jumper" :total="page.totals"
					@current-change="handleCurrentChange" @size-change="handleSizeChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import finish_IMG from "@/static/image/finish_img.png";
	import unfinish_IMG from "@/static/image/unfinish_img.png";
	export default {
		data() {
			return {
				f_img: finish_IMG,
				unf_img: unfinish_IMG,
				export_status: false,
				search_status: false,
				totals: 0,
				formData: {
					name: "",
					tableName: "",
					status: "",
				},
				ratingList: [{
						label: "合格",
						value: 1
					},
					{
						label: "不合格",
						value: 2
					},
					{
						label: "不涉及",
						value: 3
					},
				],
				page: {
					pageIndex: 1,
					pageSize: 10,
					totals: 0
				},
				tableData: [{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
					{
						a: 1,
						b: 2,
						c: 3,
						d: 4,
						e: 5,
						f: 6,
						g: 7
					},
				],
			};
		},
		created() {
			this.query();
		},
		methods: {
			query(type) {
				if (type != "page") {
					this.page.pageIndex = 1;
				}
				this.search_status = true;
				setTimeout(() => {
					this.page.totals = this.tableData.length;
					this.search_status = false;
				}, 1000);
			},
			export_cli() {
				this.export_status = true;
				setTimeout(() => {
					this.export_status = false;
				}, 1000);
			},
			detail_cli() {
							console.log(1111);
				// this.$router.push({ path: "/details" });
				uni.navigateTo({
					url: '/pages/details/index'
				});
			},
			handleCurrentChange(val) {
				this.page.pageIndex = val;
				this.query("page");
			},
			handleSizeChange(val) {
				this.page.pageSize = val;
				this.query("page");
			},
		},
	};
</script>
<style>
</style>
<style lang="scss" scoped>
	// #E8F4FF
	.list_page {
		// width: 16px;
		height: 100vh;
		padding: 16px 16px 0;
		background: #d9d9d9;

		.export_btn {

			// padding: 32px 0 16px 0;
			.el-button {
				width: 84px;
				height: 32px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 36px;
				background: #1890ff;
				color: #fff;
			}
		}

		.result_box {
			width: 100%;
			height: 75px;
			display: flex;
			justify-content: center;
			margin-top: 8px;
			border-radius: 5px;
			background: linear-gradient(#e8f4ff, #fff);

			.el-image {
				width: 40px;
				height: 40px;

				.el-image__inner {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				font-size: 16px;
				color: #494a4d;
			}

			.finish {
				margin-right: 209px;
			}

			.finish,
			.unfinish {
				display: flex;
				align-items: center;
			}

			.f_text,
			.unf_text {
				margin-left: 8px;
			}

			.f_text {
				.num {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					color: #05b1ac;
				}
			}

			.unf_text {
				.num {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					color: #f68330;
				}
			}
		}

		::v-deep .table_box {
			background: #fff;
			margin-top: 12px;

			.search_box {
				padding: 16px;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.left_item {
					display: flex;
				}

				.search_item {
					width: 295px;
					margin-right: 12px;

					.search_item_top {
						font-size: 16px;
						color: #494a4d;
						margin-bottom: 8px;
					}

					.el-input {
						height: 32px;

						.el-input__inner {
							height: 100%;
						}
					}

					.status_sel {
						width: 295px;

						.el-input__icon {
							line-height: 32px;
						}
					}
				}
			}

			.table_item .el-table__row--striped {
				.el-table__cell {
					background: rgba(24, 144, 255, 0.05);
				}
			}

			.table_item {
				.header_item {
					.el-table__cell {
						color: #1f1f1f !important;
						font-size: 16px;
						background: rgba(24, 144, 255, 0.2);
					}
				}
			}

			.el-table__cell {
				padding: 10px 0 !important;
			}

			.edit_btn {
				width: 77px;
				height: 32px;
				color: #1890ff;
				font-size: 16px;
				border-radius: 32px;
				background: #e8f4ff;
				border-color: #a3d3ff;
			}

			.pagi_box {
				// margin-top: 12px;
				text-align: right;
				padding: 24px 14px 16px 0;
				font-size: 16px;
				color: #494a4d;

				.el-pagination__jump {
					margin-left: 0;
					color: #494a4d;
				}

				.el-pagination__sizes,
				.el-pagination__total {
					color: #494a4d;
				}

				.el-pager {
					color: #494a4d;

					.active {
						background-color: #fff;
						color: #1890ff;
						border: 1px solid #1890ff;
					}
				}
			}
		}
	}
</style>